<template>
	<div class="main-container" :class="{ 'is-collapse': isCollapse }">
		<h1>欢迎使用健康管理系统</h1>
		<transition name="fade-transform" mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		props: {
			isCollapse: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped>
	.main-container {
		margin-left: 200px;
		padding: 20px;
		min-height: calc(100vh - 60px);
		background-color: #f0f2f5;
		transition: margin-left 0.28s;
	}

	.main-container.is-collapse {
		margin-left: 64px;
	}

	/* 页面切换动画 */
	.fade-transform-leave-active,
	.fade-transform-enter-active {
		transition: all 0.5s;
	}

	.fade-transform-enter {
		opacity: 0;
		transform: translateX(-30px);
	}

	.fade-transform-leave-to {
		opacity: 0;
		transform: translateX(30px);
	}
</style>